// 导航栏样式设置
* {
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
}


header {
    // todo:要使导航栏能够自适应缩放，就要进行宽度的设置
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 70px;
    width: 1520px;
    background: linear-gradient(to bottom, white, rgb(209, 204, 204));

    .logo {
        img {
            width: 100px;
        }
    }

    nav {
        >ul {
            display: flex;
            width: 1050px;
            text-align: center;

            >li {
                height: 70px;
                position: relative;


                // todo:消除掉最后一个元素的右边框
                &:nth-last-of-type(1) {
                    >a {
                        border: 0px;
                    }
                }

                >a {
                    display: inline-block;
                    width: 150px;
                    height: 70px;
                    line-height: 70px;
                    color: #000;
                    text-decoration: none;
                    border-right: 1px solid black;
                    border-image: linear-gradient(#fff, rgb(0, 0, 0, 0.4)) 1;

                    &:hover {
                        background-color: lightgrey;
                    }
                }

                &:hover {
                    >ul {
                        >li {
                            >a {
                                background: linear-gradient(to bottom, white, rgb(209, 204, 204));
                            }
                        }
                    }
                }

                &:hover {
                    >ul {

                        //  todo:在li标签上面设置hover，生成的效果是：手风琴的压缩效果。
                        >li {
                            visibility: visible;
                            line-height: 70px;
                            background: linear-gradient(to bottom, white, rgb(209, 204, 204));

                            // todo:在a标签上面设置hover，生成的效果是：每个a标签的高度首先收缩成0的高度，然后再消失。
                            a {
                                height: 70px;
                                line-height: 70px;
                                font-size: 16px;
                                background: linear-gradient(to bottom, white, rgb(209, 204, 204));
                            }
                        }
                    }
                }

                // 第二级导航栏样式的设置
                >ul {
                    position: absolute;
                    left: 0px;

                    >li {
                        position: relative;
                        line-height: 0px;
                        visibility: hidden;
                        // ?这里不设置overflow:hidden;的原因是会导致下一级的ul被溢出消失
                        // overflow: hidden;
                        transition: all .5s;

                        >a {
                            display: inline-block;
                            width: 150px;
                            // height: 0px;
                            // line-height: 0px;
                            // ?因为a标签里面有文字，就算高度设置为0px，也没办法全部压缩。要设置文字大小为0px；
                            // font-size: 0px;
                            color: #000;
                            text-decoration: none;
                            transition: all .5s;

                            &:hover {
                                background: #999;
                                color: #fff;
                            }
                        }

                        // 设置第三级的hover设置 
                        &:hover {
                            >ul {

                                >li {
                                    // ?不要在其他样式上面去设置a标签的hover样式，要控制他的样式，在a上面设置就可以了
                                    // ?background的优先级比background-color的优先级高，所以不要设置background-color
                                    background: linear-gradient(to bottom, white, rgb(209, 204, 204));
                                    height: 70px;
                                    line-height: 70px;
                                    visibility: visible;
                                }
                            }
                        }

                        &:hover {
                            >ul {
                                transform: translateX(150px);

                            }
                        }

                        // 第三级导航栏样式的设置(有bug)
                        >ul {
                            position: absolute;
                            top: 0px;
                            left: 0px;
                            transition: all .5s;


                            >li {
                                width: 150px;
                                height: 70px;
                                // !设置手风琴样式，但是在收缩的时候会有效果的先后问题，待完善
                                line-height: 70px;
                                visibility: hidden;



                                >a {
                                    display: inline-block;
                                    width: 150px;
                                    height: 70px;
                                    text-decoration: none;
                                    color: #000;
                                    transition: all .5s;
                                }

                            }
                        }
                    }
                }

            }
        }
    }
}